$body_width: 1100px;
$yahei: 'Microsoft YaHei';
@font-face {
  font-family: 'Babylon5Credits';
  src: asset-url('Babylon5Credits.eot?','fonts') format('eot');/*IE*/
  src:asset-url('Babylon5Credits.eot?#iefix','fonts') format('embedded-opentype'),
  asset-url('Babylon5Credits.woff','fonts') format('woff'), 
  asset-url('Babylon5Credits.ttf','fonts') format('truetype'),
  asset-url('Babylon5Credits.svg','fonts') format('svg');
  font-weight: normal;
  font-style: normal;
 }

*{
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
img{
  border:none;
}


header{
  background: image-url('header-bg.png') repeat-x;
  height: 118px;
  // overflow: hidden;
  min-width: $body_width;
  .content{
    width: $body_width;
    height: 120px;
    margin: auto;
    position: relative;
    z-index:60;
    nav{
      position: absolute;
      right: 0;
      bottom: 6px;
      width: 640px;
      overflow: hidden;
      ul{
        margin-right: -1px;
        text-align:right;
        li{
          display: inline-block;
          padding: 0 15px;
          background: image-url('nav-li-bg.png') no-repeat right center;
    
        }
        a{
          color: #000;
          padding: 5px 0;
          line-height: 2em;
          font-family: 'Microsoft YaHei';
          &:hover{
            background: image-url('nav-a-bg.png') no-repeat center bottom;
            // font-weight: bold;
          } 
        }
        .active{
          a{
            font-weight: bold;
            background: image-url('nav-a-bg.png') no-repeat center bottom;
          }
        }

      }
    }

    .nav-toolbar{
      background: image-url('nav-toolbar-bg.png') no-repeat;
      width: 411px;
      height: 33px;
      position: absolute;
      right: 0;
      bottom:50px;
      a{
        color: #fff;
        line-height:2.4em;
        font-size: 13px;
        padding: 0 0 0 2px;
      }
      .weixin{
        display:inline-block;
       
        padding-left: 50px;
        position: relative;
        img{
          position: absolute;
          left:22px;
          top:25px;
          width: 93px;
          height: 93px;
        }

      }
      .weibo{
        display:inline-block;
        padding-left: 43px;
        padding-right: 10px;

      }
    }
  }
}

.banner{
  // background: image-url('banner-about-bg.png') no-repeat center center;
  height: 233px;
  color: #fff;
  margin-bottom: 25px;
  min-width: 1100px;
  .content{
    width: $body_width;
    margin:auto;
    padding-top: 120px;
    h1,h2{
      line-height: 1em;
    }
    h1{
      font: 24px 'MircosoftYahei';
    }
    h2{
      font:39px 'Babylon5Credits';
    }
    


  }
}
.banner-player{
  min-width: $body_width;
}
.banner-service{
  background: image-url('banner-service.png') no-repeat center center;
}

.banner-article{
  // background: image-url('banner-news.png') no-repeat center center;
}

#main{
  width: $body_width;
  margin:auto;
}

.breadcrumb{
  border-left: 3px solid #838383;
  border-top: 1px solid #c6c6c6;
  border-bottom: 1px solid #c6c6c6;
  height: 33px;
  color: #646464;
  font-family: 'Microsoft YaHei';
  position: relative;
  h3{
    display: inline-block;
    background: #f8f8f8 image-url('bread-h-bg.png') no-repeat left center;
    line-height: 2.2em;
    padding: 0 10px  0 120px;
    height: 33px;
    font:  14px/2.6em 'Microsoft YaHei';
    
  }
  span{
    display: inline-block;
    position: absolute;
    z-index:1;
    right: 0;
    top: -5px;
    font-size: 12px;
    background: image-url('bread-n.png') no-repeat left center;
    padding: 16px 0 6px 30px;

    cite{
      font-style: normal;
    }
  }
  ol{
    list-style: none;
    display: inline;

  }
  ol > li {

    // padding: 0 5px;

    display: inline-block;
  }
  ol > .arrow{

  }

  li{
    display: inline-block;
  }
}

.comm-box{
  width: 835px;
  float: left;
}

.article{
  line-height: 1.5em;
  font-size: 12px;
  text-indent: 2em;
  padding: 35px 0;
  color: #4a4a4a;
  p{
    margin-bottom: 30px;
  }

  h2{
    text-indent: 0;
    margin-bottom: 18px;
  }
}
.sidebar{
  width: 252px;
  float: right;
}
.side-nav{
  background: image-url('side-nav-bg.png') no-repeat;
  padding: 5px 17px 0 17px;
  height: 270px;
  margin-bottom: 30px;
  h3{
    margin-bottom: 15px;
    text-align: center;
    color: #fff;
    font-family: $yahei;
    padding-left: 50px;
    cite{
      font-style: normal;
      font-size: 9px;
      padding: 0 5px;
      font-weight: normal;
      color: #f19389;
    }
  }
  li > a{
    color: #383838;
    display: block;
    border:1px solid #dddddd;
    margin:7px 0;
    padding: 5px 0 5px 10px;
    background: image-url('side-nav-li-bg.png') no-repeat;
    height: 18px;
    font-size: 12px;
    width: 204px;
    &:hover{
      background: image-url('side-nav-li-hover-bg.png') no-repeat;
      color: #f15b29;
    }
  }
}
.product-bg{
  background: image-url('side-product-bg.png') no-repeat;
}
.about-bg{
  background: image-url('side-about-bg.png') no-repeat;
}
.phone{
  display: inline-block;
  background: image-url('phone-bg.png') no-repeat;
  width: 215px;
  height: 48px;
  margin-top: 10px;
}

.side-service{
  background: image-url('side-service.png') no-repeat;
  height: 280px;
}

.qrcode{
  float: left;
}
.contact-content{
  background: image-url('contact-us-bg.png') no-repeat right 10px;
}

#map{
  height: 360px;
  width: 820px;
  margin: 20px auto 0 ;
}

.article .contact-info {
  p{
    margin-bottom: 5px;
    font-size: 14px;
  }
  h3{
    margin: 10px 0 ;
  }
}

footer{
  min-width: $body_width;
  .top{
    background: #262626;
    padding: 40px 0 100px 0;
  }
.content{
    width: $body_width;
    margin: auto;
    color: #fff;

  } 
    
  .footer-nav-item{
    width: 205px;
    float: left;
    h3{
      font:14px '宋体';
      margin-bottom: 8px;
    }
    ul > li > a{
      color: #aaa;
      line-height: 1.8em;
      font-size: 12px;
      &:hover{
        color:#ccc;
      }
    }
  }

  .contact{
    float: right;
    width: 200px;
    h3{
      font:14px '宋体';
      margin-bottom: 8px;
    }
    font-size: 14px;
    line-height: 1.5em;
    .jiathis_style{
      margin-top: 10px;
    }
  }

  .bottom{
    background: #000;
    .f-logo{
      float: left;
      margin-right: 45px;
    }
    .f-bottom-nav{
      padding-top: 37px;
      display: inline-block;
      font-size: 12px;
      font-family:Arial;
    }
    a{
      color: #fefefe;
      padding: 0 8px;
    }
  }

}

.article-list{
  color: #646464;
  
  li{
    height: 95px;
    padding: 10px 15px;
    border: 1px solid #ebebeb;
    border-radius:3px;
    margin:30px 0;
    // box-shadow:0 0 10px 2px #f3f3f3;
    box-shadow: 3px 3px 6px  #bcbcbc;
    // -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#bcbcbc')";
    position: relative;
    .more{
      position: absolute;
      background: image-url('icon-more.png') no-repeat;
      bottom: -20px;
      right: 25px;
      display: inline-block;
      // width: 35px;
      // height: 27px;
      width: 33px;
      height: 36px;
    }
  }
  .cover{
    float: left;
    margin-right: 10px;
    width: 157px;
    img{
      width: 157px;
      height: 96px;
    }
  }
  .detail{
    float: left;
    width: 630px;
    h1{
      border-bottom: 1px dashed #d8d8d8;
      font-size: 16px;
      a{
        line-height: 2em;
        color: #646464;
        &:hover{
          color:#333;
        }
      }
      margin-bottom: 10px;
    }
    p{
      line-height: 1.5em;
      font-size: 12px;
    }
  }
  
}

.article-show{
  position: relative;
  padding: 10px 30px;
  color: #646464;
  box-shadow:0 0 10px 2px #f3f3f3;
  margin: 25px 0;
  border:1px solid #ebebeb;
  border-radius: 4px;
  overflow: visible;
  .info{
    text-align: center;
    border-bottom: 1px dashed #d8d8d8;
    margin-bottom: 20px;
    padding:10px 0;
    cite{
      font-size: 12px;
      font-style: normal;
    }
    

  }
  .content{
    

    p{
      text-indent: 2em;
      font-size: 12px;
      line-height: 1.5em;
      margin-bottom: 20px;
    }
  }
  h1{
    font-size: 16px;
    text-align: center;
  }
  .back{
    position: absolute;
    background: image-url('icon-back.png') no-repeat;
    bottom: -10px;
    right: 25px;
    display: inline-block;
    width: 35px;
    height: 31px;
  }

}

.share{
  display: inline-block;
}

.index-h1{
  font-family: $yahei;
  font-size: 26px;
  text-align: center;
  margin: 20px 0;
  color: #2b2b2b;
  font-weight: normal;
}
.container{
  .content{
    width: $body_width;
    margin: auto;
  }
}
.our-item{
  color: #7c7c7c;
  width: 330px;
  text-align: center;
  padding: 45px 10px ;
  float: left;
  h2{
    color: #2b2b2b;
    font-size: 24px;
    font-family: $yahei;
    font-weight: normal;
    margin-bottom: 25px ;
  }
  p{
    font-size: 15px;
    line-height: 2em;
    margin-bottom: 25px;
    height: 60px;
  }

  
}

// .btn-more{
//   color: #454545;

//   -moz-border-bottom-colors: none;
//   -moz-border-left-colors: none;
//   -moz-border-right-colors: none;
//   -moz-border-top-colors: none;
//   background-color: #F5F5F5;
//   background-image: linear-gradient(to bottom, #E6E6E6,#b8b8b8);
//   background-repeat: repeat-x;
//   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #b8b8b8;
//   border-image: none;
//   border-radius: 4px;
//   border-style: solid;
//   border-width: 1px;
//   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
//   color: #333333;
//   cursor: pointer;
//   display: inline-block;
//   font-size: 14px;
//   line-height: 20px;
//   margin-bottom: 0;
//   padding: 4px 12px;
//   text-align: center;
//   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
//   vertical-align: middle;
//   &:hover{
//     background-position: 0 -15px;
//     color: #333333;
//     text-decoration: none;
//     transition: background-position 0.1s linear 0s;
//     outline: thin dotted #333333;
//     outline-offset: -2px;
//     background: #E6E6E6;
//   }
// }
.btn-more{
  background: image-url('btn-more-bg.png') no-repeat;
  display:inline-block;
  width: 72px;
  height: 28px;
  color: #454545;
  font-size: 12px;
  line-height: 2.3em;
  text-align:center;
}

.icon-product{
  background: image-url('icon-product.png') no-repeat;
  width: 60px;
  height: 70px;
  display: inline-block;
}
.icon-service{
  background: image-url('icon-service.png') no-repeat center center;
  width: 60px;
  height: 72px;
  display: inline-block;
}

.icon-client{
  background: image-url('icon-client.png') no-repeat center center;
  width: 65px;
  height: 77px;
  display: inline-block;
}
.icon-coffee{
  background: image-url('icon-coffee.png') no-repeat center center;
  width: 61px;
  height: 72px;
  display: inline-block;
}
.icon-card{
  background: image-url('icon-card.png') no-repeat center center;
  width: 57px;
  height: 72px;
  display: inline-block;
}

.expert-help{
  background: image-url('expert-help-bg.png') repeat-x;
  
  .content{
    padding: 60px 0;
    height: 136px;
    
    position: relative;
    .icon-pc{
      position: absolute;
      background: image-url('icon-pc.png') no-repeat;
      width: 270px;
      height: 270px;
      top: -10px;
      right: 0;
    }
  }
  h2,p{
    width: 750px;
    color: #2b2b2b;
    margin-bottom: 15px;
  }
  h2{
    font-size: 24px;
    font-weight: normal;

  }
  p{
    color: #2b2b2b;
    font-size: 16px;
    line-height: 1.5em;
  }
}

.our-item-large{
  width: 400px;
  padding: 45px 60px ; 
  p{

    font-size: 16px;
  }
}

/*player*/
.carousel {
  position: relative;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner > .item {
  position: relative;
  display: none;
  -webkit-transition: 0.6s ease-in-out left;
          transition: 0.6s ease-in-out left;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  height: auto;
  max-width: 100%;
  line-height: 1;
}

.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}

.carousel-inner > .active {
  left: 0;
}

.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}

.carousel-inner > .next {
  left: 100%;
}

.carousel-inner > .prev {
  left: -100%;
}

.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}

.carousel-inner > .active.left {
  left: -100%;
}

.carousel-inner > .active.right {
  left: 100%;
}

.carousel-control {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15%;
  font-size: 20px;
  color: #ffffff;
  text-align: center;
  // text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  // opacity: 0.5;
  // filter: alpha(opacity=50);
}

// .carousel-control.left {
//   background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
//   background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
//   background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
//   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
//   background-repeat: repeat-x;
//   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
// }
.carousel-control.left{
  background: image-url('slide-arrow-l.png') no-repeat;
  display:inline-block;
  width: 46px;
  height: 79px;
  top: 20px;
}

.carousel-control.left:hover{
  background: image-url('slide-arrow-l-hover.png') no-repeat;
}

.carousel-control.right {
  right: 0;
  left: auto;
  top: 20px;
  background: image-url('slide-arrow-r.png') no-repeat;
  display:inline-block;
  width: 46px;
  height: 79px;
}

.carousel-control.right:hover{
  background: image-url('slide-arrow-r-hover.png') no-repeat;
}

.carousel-control:hover,
.carousel-control:focus {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
}

.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
}

.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
  left: 50%;
}

.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
  right: 50%;
}

.carousel-control .icon-prev,
.carousel-control .icon-next {
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  font-family: serif;
}

.carousel-control .icon-prev:before {
  content: '\2039';
}

.carousel-control .icon-next:before {
  content: '\203a';
}

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 20%;
  z-index: 15;
  width: 60%;
  padding-left: 0;
  margin-left: -30%;
  text-align: center;
  list-style: none;
}

.carousel-indicators li {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 6px;
  text-indent: -999px;
  cursor: pointer;
  // background-color: #f1602a;
  // border-radius: 10px;
  background: image-url('slide-icon-default.png') no-repeat;
}

.carousel-indicators .active {
  width: 14px;
  height: 14px;

  // background-color: #f6d636;
  background: image-url('slide-icon-active.png') no-repeat;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.carousel-caption .btn {
  text-shadow: none;
}

.article-player{
  background: #EF552C;

  h3{
    font-size: 28px;
  }
  .article-list .detail h1{
    border-bottom: 0px;
    font-size: 18px;
  }
  .article-list .detail p{
    font-size: 14px;
  }
  .article-list .detail h1 a,.article-list{
    color: #fff;
  }
  .article-list {
    padding: 10px 0 10px 180px;
    height: 100px;
    .cover{
      margin-right: 20px;
      img{
        border: 4px solid #c5441d;
        border-radius: 4px;

      }
    }

  }

  .content{
    width: 1200px;
    margin:auto;

  }
  .carousel-inner{
    padding: 0 50px;
  }
  .title{
    background: image-url('news-bg.png') no-repeat;
    position: absolute;
    left: 65px;
    top: 30px ;
    width: 120px;
    height: 54px;
    color: #fff;
    h2{
      font-size: 30px;
    }
  }
}

.jobs{
  color: #4a4a4a;
  font-size: 12px;
  line-height: 2em;
  h3{
    margin: 30px 0 10px 0;
    font-size: 14px;
  }
  .tab-pane{
    height: 200px;
    background: image-url('job-detail-bg.png') no-repeat top right;
    border: 1px solid #cdcdcd;
    box-shadow: 3px 3px 3px 1px #f3f3f3;
    border-radius: 5px;
    margin: 20px 0;
    padding: 20px;
    .gray{
      color: #909090;
    }
    h4{
      color: #e63a31;
      font-size: 14px;
    }
  }
  .red{
    color: #e63a31;
  }
}

.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}

.job-nav-tabs{
  li{
    display: inline-block;
    width: 160px;
    a{
      color: #4a4a4a;
    }
  }
  .active{
    a{
      color: #e63a31;
    }
  }
}

.icon-face{
  background: image-url('icon-face.png') no-repeat;
  padding-left: 35px;
  line-height: 2.2em;
}
.icon-bag{
  background: image-url('icon-bag.png') no-repeat;
  padding-left: 35px;
  line-height: 2.5em;
}

.products{

}
.product{
  width: 350px;
  color: #707070;
  padding: 20px 5px;
  float: left;
  h2{
    font-size: 14px;
    margin-bottom: 15px;
    padding-right: 20px;
  }
  p{
    font-size: 12px;
    line-height: 2em;
    padding-right: 20px;
  }
  a{
    background: image-url('product-bg.png') no-repeat;
    display: inline-block;
    width: 334px;
    height: 216px;
    padding: 20px 15px 15px 20px;
    img{
      width: 285px;
      height: 160px;
    }
  }
}

.product-show{
  .descrip{
    font-size: 12px;
    line-height: 2em;
    color: #4a4a4a;
    p{
      text-indent: 2em;
      margin-bottom: 20px;
    }
  }
  .cover{
    background: image-url('product-line.png') no-repeat center bottom;
    padding: 0 0 40px 0;
  }
}

.product-logo{
  width: 560px;
  height: 120px;
  margin: auto;
  display: block;
  margin-top:10px;
}

.index-width-hack{
  min-width: 1400px;
  // overflow-x:hidden; 
}
.post-bar{
  a{
    border: 1px solid #ccc;
    color: #646464;
    font-size:12px;
    padding: 3px 5px;
    &:hover{
      background: #f48430;
      border: 1px solid #e7681a
    }
  }
}
.pagination{
  margin: 15px 0;
  a,span,em{
    border: 1px solid #ccc;
    color: #646464;
    font-size:12px;
    padding: 3px 5px;
    &:hover{
      background: #f48430;
      border: 1px solid #e7681a;
    }
  }
  .disabled{
    a{
      &:hover{
        background: #f48430;
        border: 1px solid #e7681a;
      }
    }
  }
  .current{
    background: #f48430;
    border: 1px solid #e7681a;
    font-style:normal;
  }
}
// .pagination{
//   margin: 15px 0;
//   li{
//     display:inline-block;
//     a{
//       border: 1px solid #ccc;
//       color: #646464;
//       font-size:12px;
//       padding: 3px 5px;
//       &:hover{
//         background: #f48430;
//         border: 1px solid #e7681a;
//       }
//     }
//   }
//   .disabled{
//     a{
//       // border:none;
//       &:hover{
//         background: #f48430;
//         border: 1px solid #e7681a;
//       }
//     }
//   }
//   .active{
//     a{
//       background: #f48430;
//       border: 1px solid #e7681a;
//     }
//   }
// }

// .glyphicon-chevron-left:before {
//   content: "";
// }
// .glyphicon-chevron-right:before{
//   content: "";
// }
.hide{
  display:none;
}

.cc:after {content: ".";display: block;height:0;clear: both;visibility: hidden;}
.cc {display: inline-block;}
* html .cc {height: 1%;}
.cc {display: block;}
.c{clear:both;font:0px/0px Arial;overflow:hidden;height:0;width:0;}
